<!DOCTYPE html>
<html>
    <head>
        <style>
            div { font-family: Arial; }
            .narrow { font-family: Arial Narrow; }
        </style>
    </head>
    <body>
        <section>
            <h2>font-stretch: condensed vs Arial Narrow</h2>
            <div style="font-stretch: condensed">Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow">Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow" style="font: extra-condensed">Back in June we delivered oxygen equipment of the same size.</div>
            <p>
                The three lines above should have the same weight.
            </p>
        </section>

        <section>
            <h2>Specific width, Arial</h2>
            <div style="font-stretch: ultra-condensed">font-stretch: ultra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-stretch: extra-condensed">font-stretch: extra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-stretch: condensed">font-stretch: condensed - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-stretch: semi-condensed">font-stretch: semi-condensed - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-stretch: normal">font-stretch: normal - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-stretch: semi-expanded">font-stretch: semi-expanded - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-stretch: expanded">font-stretch: expanded - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-stretch: extra-expanded">font-stretch: extra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-stretch: ultra-expanded">font-stretch: ultra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
        </section>

        <section>
            <h2>Specific width, Arial Narrow</h2>
            <div class="narrow" style="font-stretch: ultra-condensed">font-stretch: ultra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow" style="font-stretch: extra-condensed">font-stretch: extra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow" style="font-stretch: condensed">font-stretch: condensed - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow" style="font-stretch: semi-condensed">font-stretch: semi-condensed - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow" style="font-stretch: normal">font-stretch: normal - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow" style="font-stretch: semi-expanded">font-stretch: semi-expanded - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow" style="font-stretch: expanded">font-stretch: expanded - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow" style="font-stretch: extra-expanded">font-stretch: extra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="narrow" style="font-stretch: ultra-expanded">font-stretch: ultra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
        </section>
    </body>
</html>
